<template>
  <view class="user_center" :style="'padding-top: ' + menuButton.bottom + 'px'">
    <!-- 登陆框 -->
    <view class="login_box">
      <image :src="userInfo.avatarUrl || defaultAvatar" mode="widthFix" class="avatar"></image>
      <view class="nick_box">
        <view class="text"><text class="name" v-if="userInfo.level">{{userInfo.nickName || userInfo.mobile}}</text></view>
        <view class="text"><text class="level" v-if="userInfo.level">用户等级:{{userInfo.level}}</text></view>
        <button class="login_btn btn" v-if="!userInfo.level" @click="goLogin"><text class="login">登陆</text></button>
      </view>
      <form class="form_id" @submit="checkIn" :report-submit="true">
        <button class="check_in" form-type="submit">{{userInfo.hasCheckIn ? '已签到' : '签到送积分'}}</button>
      </form>
    </view>
    <!-- 用户余额等信息 -->
    <view class="info_box">
      <view class="info_item" @click="goList('gold')" v-if="isDev === 'release'">
        <view class="title">
          积分
        </view>
        <view class="number">
          {{userInfo.gold || 0}}
        </view>
      </view>
      <view class="info_item" @click="goList('cashgift')" v-if="isDev === 'release'">
        <view class="title">
          礼金
        </view>
        <view class="number">
          {{userInfo.cashgiftNumber || 0}}
        </view>
      </view>
      <view class="info_item" @click="goList('order')" v-if="isDev === 'release'">
        <view class="title">
          订单
        </view>
        <view class="number">
          {{userInfo.orderNumber || 0}}
        </view>
      </view>
      <view class="info_item" @click="goList('favorite')">
        <view class="title">
          收藏
        </view>
        <view class="number">
          {{userInfo.favoriteNumber || 0}}
        </view>
      </view>
    </view>
    <!-- 操作列表 -->
    <view class="action_box">
      <!-- 修改资料 -->
      <!-- <button class="btn action_item" open-type="contact">
        <view class="left_icon">
          <text class="iconfont icon-ziliao"></text>
          修改资料
        </view>
        <view class="right_icon">
          <text class="iconfont icon-you1"></text>
        </view>
        <view style="clear: both;"></view>
      </button> -->
      <!-- 绑定手机 -->
      <!-- <button class="btn action_item" open-type="contact">
        <view class="left_icon">
          <text class="iconfont icon-shouji"></text>
          绑定手机
        </view>
        <view class="right_icon">
          绑定后可通过手机号登陆
          <text class="iconfont icon-you1"></text>
        </view>
      </button> -->
      <!-- 联系客服 -->
      <button class="btn action_item" open-type="contact" @click="contact">
        <view class="left_icon">
          <text class="iconfont icon-kefu"></text>
          在线客服
        </view>
        <view class="right_icon">
          <text class="iconfont icon-you1"></text>
        </view>
      </button>
      <!-- 意见反馈 -->
      <button class="btn action_item" open-type="feedback">
        <view class="left_icon">
          <text class="iconfont icon-fankui"></text>
          意见反馈
        </view>
        <view class="right_icon">
          <text class="iconfont icon-you1"></text>
        </view>
      </button>
      <!-- 退出登录 -->
      <button class="btn action_item" @click="logout">
        <view class="left_icon">
          <text class="iconfont icon-tuichudenglu"></text>
          退出登录
        </view>
        <view class="right_icon">
          <text class="iconfont icon-you1"></text>
        </view>
      </button>
    </view>
  </view>
</template>

<script>
  export default {
    components: {
    },
    data() {
      return {
        userInfoFlag: false, // 判断是否成功获取授权
        defaultAvatar: 'https://mtds.oss-cn-hangzhou.aliyuncs.com/taoke_rabbit/avatar/defaultAvatar.png',
        menuButton: this.menuButton,
      }
    },
    computed:{
      userInfo(){
        return this.$store.state.userInfo
      },
      isDev(){
        return this.$store.state.isDev
      },
    },
    created() {
    },
    methods: {
      contact(){ // 联系客服
        // #ifdef APP-PLUS
        plus.runtime.openURL(`mqqwpa://im/chat?chat_type=wpa&uin=316075960`)
        // #endif
      },
      goLogin() {
        uni.navigateTo({
          url: '/pages/usercenter/login'
        });
      },
      logout() {
        uni.showModal({
          title: '提示',
          content: '您确定要退出登陆吗？',
          success: res => {
            if (res.confirm) {
              // 用户点击确定
              uni.removeStorageSync('token');
              // 调用刷新用户信息方法
              this.$store.commit('refreshUserInfo')
            }
          }
        });
      },
      checkIn(e) {
        let formId = e.detail.formId // formId，用于发送模板消息
        if (!this.userInfo.hasCheckIn) {
          // 如果还未签到
          this.$api.user.checkIn({
            page: '/pages/home/index?index=4&&ref=usercenter', // 点击模板跳转的页面
            formId: formId, // 表单id用于发送模板消息
          }).then(res => { // 获取用户信息
            // #ifndef H5 || APP-PLUS
            getApp().mtj.trackEvent('checkin', { // 埋点统计
              user_id: this.userInfo.id || 0,
            });
            // #endif
            uni.showToast({
              icon: 'none',
              title: `恭喜签到成功，获得积分+${res.data}`
            });
            // 调用刷新用户信息方法
            this.$store.commit('refreshUserInfo')
          })
        } else {
          uni.showToast({
            icon: 'none',
            title: '抱歉，您今日已经签到过了，请明日再来'
          });
        }
      },
      initData() {
        this.hasAuthen(); // 获取用户授权信息判断
        // 调用刷新用户信息方法
        this.$store.commit('refreshUserInfo')
      },
      hasAuthen() {
        uni.getSetting({ // 获取用户授权信息判断
          success: res => {
            if (res && res.authSetting) {
              this.userInfoFlag = res.authSetting['scope.userInfo']
            }
          }
        })
      },
      goList(type) {
        if (type === 'favorite') {
          this.$emit('switch', {
            index: 3,
            ref: 'favorite'
          })
        } else if (type === 'cashgift') {
          uni.navigateTo({
            url: '/pagesusercenter/cashgift/index'
          });
        } else if (type === 'gold') {
          uni.navigateTo({
            url: '/pagesusercenter/goldrecord/index'
          });
        } else if (type === 'order') {
          uni.navigateTo({
            url: '/pagesusercenter/order/index'
          });
        }
      },
      refresh() {
        // 刷新
        // 调用刷新用户信息方法
        this.$store.commit('refreshUserInfo')
        uni.stopPullDownRefresh(); //停止刷新动画
      },
    }
  }
</script>

<style scoped lang="scss">
  .user_center {
    animation: fadein 1s;
    min-height: 100%;
    margin-top: var(--status-bar-height);
    padding-top: 50px;
    .login_box {
      height: 120upx;
      margin-top: 40upx;
      padding: 0 40upx;
      .avatar {
        display: inline-block;
        border-radius: 50%;
        width: 120upx;
        height: 120upx;
        background-color: transparent;
      }
      .nick_box {
        display: inline-block;
        vertical-align: top;
        margin-left: 40upx;
        .text {
          display: block;
          .name {
            font-size: 35upx;
            font-weight: 600;
            line-height: 60upx;
          }
          .level {
            font-size: 30upx;
            line-height: 60upx;
            color: #939ba6;
          }
        }
        .login_btn {
          margin-top: 20upx;
          padding: 0 60upx;
          font-size: 30upx;
          border-radius: 50upx;
          height: 80upx;
          line-height: 80upx;
          background-color: #1aad19;
          color: #ffffff;
        }
      }
      .form_id{
        display: inline;
        .check_in {
          display: inline-block;
          vertical-align: middle;
          float: right;
          margin: 50upx 20upx 0 0;
          padding: 5upx 10upx;
          display: inline-block;
          color: #2f5085;
          width: 160upx;
          font-size: 25upx;
          height: 50upx;
          line-height: 40upx;
          border-radius: 40upx;
          background: #ffffff;
          border: 1px solid #2f5085;
        }
      }
    }
    .info_box {
      margin-top: 40upx;
      .info_item {
        display: inline-block;
        text-align: center;
        width: 25%;
        font-size: 30upx;
        font-weight: 600;
        line-height: 45upx;
      }
    }
    .action_box {
      padding: 0 40upx;
      margin-top: 50upx;
      .action_item {
        padding: 0;
        height: 100upx;
        line-height: 100upx;
        font-size: 30upx;
        background-color: #ffffff;
        .left_icon {
          float: left;
          display: flex;
          line-height: 100upx;
          .iconfont {
            margin-right: 10upx;
            font-size: 30upx;
            line-height: 100upx;
          }
        }
        .right_icon {
          float: right;
          display: flex;
          color: #b1b6bd;
          line-height: 100upx;
          .iconfont {
            margin-left: 10upx;
            font-size: 30upx;
            line-height: 100upx;
          }
        }
      }
      .action_item::after {
        content: none;
      }
    }
  }
</style>
